<template>
  <div class="wrap">
    <h1>less 变量  less-variable</h1>
    <p class="description">vue less Variable test</p>
    <p class="title">hello</p>
    <p class="common">引入公共样式文件并且使用</p>
  </div>
</template>

<script>
export default {
  name: 'Variable01',
  props: {

  }
}

/*
  vue中使用 less 变量说明解释（需要注意的是，随着 less 版本的升高，可能会添加更多的 less 功能）：

  (1) less 变量的命名使用 @ 符号进行标识，然后后面跟上变量名，构成完整的 less 变量名，最后在需要使用的地方把变量放进去即可; 

  (2) less 的变量名中如果有多个单词，我们一般采用中划线的方式进行连接，但是也可以采用其它方式例如下划线进行连接;  @font_color: red;

  (3) 选择器的名称也可以作为一个变量的值传递过去，如下示例；@selector-name: description;

  (4) 图片地址同样可以作为一个变量值传递过去，如下示例; @image-src: "../assets";

  (5) less 可变变量，如下示例 class="title"

  (6) 引入其它样式文件, 当前组件的样式可以写在当前的样式文件中，但是全局的样式文件最好是独立出来，便于管理，
      这种情况下我们就需要在当前的样式文件中引入全局样式文件, 如 class="common"

  (7) less 中关于变量还可以拼接到属性名中，如下示例：@little-color: color;

  (8) 变量可以先使用，后定义，如下示例：height: @lazy;  但是不能不定义，
      同时这也意味着，后定义的可以覆盖之前定义的变量
*/
</script>


<style lang="less" scoped>
// 引入外部 less 样式文件
@import "../common/common.less";

// 变量设置 Variables
@border-color: orange;
@font_color: red;
@test-color: blue;
@selector-name: description;
@image-src: "../assets";
@little-color: color;

// 用法 Usage
.wrap{
  border: 1px solid @border-color;  
  color: @font_color;
  background: url("@{image-src}/logo.png") 100% 100%;
}
.@{selector-name}{
  color: @font_color;
}
.title {
  @title-color: test-color;
  color: @@title-color;
}
.common{
  color: @common-color;
  background-@{little-color}: red;
  height: @lazy; 
}
@lazy: 100px;


</style>
